<script setup>
import router from '@/router';
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

// 用于存储 AI 盒子的位置
const aiPosition = ref({ x: 0, y: 0 });
const isDragging = ref(false);
const initialMousePosition = ref({ x: 0, y: 0 });
const hasMoved = ref(false); // 标记是否发生了移动

// 处理拖拽开始
const handleMouseDown = (event) => {
  isDragging.value = true;
  hasMoved.value = false; // 重置移动标志
  initialMousePosition.value = {
    x: event.clientX - aiPosition.value.x,
    y: event.clientY - aiPosition.value.y
  };
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
};

// 处理拖拽过程
const handleMouseMove = (event) => {
  if (isDragging.value) {
    hasMoved.value = true; // 标记已经发生移动
    aiPosition.value = {
      x: event.clientX - initialMousePosition.value.x,
      y: event.clientY - initialMousePosition.value.y
    };
  }
};

// 处理拖拽结束
const handleMouseUp = () => {
  isDragging.value = false;
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
};

// 处理AI盒子点击
const handleAiClick = () => {
  // 只有在没有拖动的情况下才触发点击事件
  if (!hasMoved.value) {
    router.push('/ai');
  }
};

// 图一是否显示更多信息
const chart1IsShowMore = ref(false);
// 图一显示更多数据
const chart1ShowMore = () => {
  chart1IsShowMore.value = true
  // 图一
  var chartDom1 = document.getElementById('graph1');
  var myChart1 = echarts.init(chartDom1);
  var option1;
  // 图一相关配置
  option1 = {
    color: ['#f89f62', '#f49ff1', '#99def8'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      right: '100px',          // 关键！为右侧图例留出 80px 空间
      left: '20px',           // 左侧留适当空间给 y 轴标签
      top: '5px',
      bottom: '0px',
      containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
    },
    legend: {
      orient: 'vertical',     // 垂直排列（推荐用于右侧）
      itemGap: 10,
      right: 15,              // 距离容器右边 10px
      top: 'middle',          // 垂直居中，也可用 'top' 或具体像素如 20
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false  // 🔥 关闭竖直方向的网格线
      }
    },
    yAxis: {
      type: 'category',
      data: [ '资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院', '交通学院', '土木工程学院', '财商学院', '体育艺术学院', '马克思主义学院', '公共基础学夸' ],
    },
    barCategoryGap: '50%',
    series: [
      {
        name: '预警人数',
        type: 'bar',
        data: [15, 14, 21, 54, 43, 45, 12, 12, 16, 45, 26],
        barWidth: '30%',
        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.6)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '总人数',
        type: 'bar',
        data: [340, 320, 524, 630, 654, 548, 895, 154, 564, 457, 652],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.8)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '参与人数',
        type: 'bar',
        data: [324, 279, 434, 602, 545, 512, 754, 145, 478, 365, 587],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'insideRight', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 1)',         // 字体颜色
          fontSize: 10
        },
      }
    ],
    barGap: '5%'
  };
  // 设置图形配置
  option1 && myChart1.setOption(option1);
}
// 图一取消显示更多数据
const chart1NotShowMore = () => {
  chart1IsShowMore.value = false
  // 图一
  var chartDom1 = document.getElementById('graph1');
  var myChart1 = echarts.init(chartDom1);
  var option1;
  // 图一相关配置
  option1 = {
    color: ['#f89f62', '#f49ff1', '#99def8'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      right: '100px',          // 关键！为右侧图例留出 80px 空间
      left: '20px',           // 左侧留适当空间给 y 轴标签
      top: '0px',
      bottom: '0px',
      containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
    },
    legend: {
      orient: 'vertical',     // 垂直排列（推荐用于右侧）
      itemGap: 10,
      right: 15,              // 距离容器右边 10px
      top: 'middle',          // 垂直居中，也可用 'top' 或具体像素如 20
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false  // 🔥 关闭竖直方向的网格线
      }
    },
    yAxis: {
      type: 'category',
      data: ['资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院'],
    },
    barCategoryGap: '50%',
    series: [
      {
        name: '预警人数',
        type: 'bar',
        data: [43, 54, 21, 14, 15],
        barWidth: '30%',
        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.6)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '总人数',
        type: 'bar',
        data: [654, 635, 527, 324, 347],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.8)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '参与人数',
        type: 'bar',
        data: [545, 602, 434, 279, 324],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'insideRight', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 1)',         // 字体颜色
          fontSize: 10
        },
      }
    ],
    barGap: '5%'
  };
  // 设置图形配置
  option1 && myChart1.setOption(option1);
}
onMounted(() => {
    // 图一
    var chartDom1 = document.getElementById('graph1');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    // 图二
    var chartDom2 = document.getElementById('graph2');
    var myChart2 = echarts.init(chartDom2);
    var option2;
    // 图三
    var chartDom3 = document.getElementById('graph3');
    var myChart3 = echarts.init(chartDom3);
    var option3;
    // 图四
    var chartDom4 = document.getElementById('graph4');
    var myChart4 = echarts.init(chartDom4);
    var option4;
    // 图五
    var chartDom5 = document.getElementById('graph5');
    var myChart5 = echarts.init(chartDom5);
    var option5;

    // 图一相关配置
    option1 = {
        color: ['#f89f62', '#f49ff1', '#99def8'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            right: '100px',          // 关键！为右侧图例留出 80px 空间
            left: '20px',           // 左侧留适当空间给 y 轴标签
            top: '0px',
            bottom: '0px',
            containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
        },
        legend: {
            orient: 'vertical',     // 垂直排列（推荐用于右侧）
            itemGap: 10,
            right: 15,              // 距离容器右边 10px
            top: 'middle',          // 垂直居中，也可用 'top' 或具体像素如 20
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
        show: false  // 🔥 关闭竖直方向的网格线
    }
        },
        yAxis: {
            type: 'category',
            data: ['资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院'],
        },
        barCategoryGap: '50%',
        series: [
            {
                name: '预警人数',
                type: 'bar',
                data: [43, 54, 21, 14, 15],
                barWidth: '30%',
                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'right', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 0.6)',         // 字体颜色
                    fontSize: 10
                },
            },
            {
                name: '总人数',
                type: 'bar',
                data: [654, 635, 527, 324, 347],
                barWidth: '30%',

                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'right', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 0.8)',         // 字体颜色
                    fontSize: 10
                },
            },
            {
                name: '参与人数',
                type: 'bar',
                data: [545, 602, 434, 279, 324],
                barWidth: '30%',

                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'insideRight', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 1)',         // 字体颜色
                    fontSize: 10
                },
            }
        ],
        barGap: '5%'
    };

    // 图二相关配置
    option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['测评', '心理练习', '呼吸训练', '社群互助', '心情打卡', '解压游戏', 'AI咨询', '冥想练习'],
            icon: 'circle',
            bottom: '0px',
            left: '26px',
            right: '26px'
        },
        color: ['#3591ef', '#885efb', '#00d6d6', '#e16882', '#fa8024', '#885efb', '#00d6d6', '#da4767'],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '28%',
            top: '15px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: ['20%', '10%'],
            data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月' ],
        },
        yAxis: {
            type: 'value',
            // interval: 2000,
            // splitNumber: 3,
            splitLine: {
                show: true, // 确保显示水平网格线
                lineStyle: {
                    type: 'dashed', // 设置为虚线
                    color: 'rgba(0, 0, 0, 0.2)' // 可选：设置颜色
                }
            },
        },
        series: [
            {
                name: '测评',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [124, 132, 2254, 247, 1412, 225, 217, 356, 1584, 2451],
            },
            {
                name: '心理练习',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [227, 182, 2545, 234, 985, 331, 315, 524, 1457, 1547]
            },
            {
                name: '呼吸训练',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [151, 232, 2514, 154, 1145, 337, 412, 457, 1247, 2145 ]
            },
            {
                name: '社群互助',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [324, 332, 1458, 334, 689, 335, 322, 745, 1154, 2531 ]
            },
            {
                name: '心情打卡',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [824, 932, 3111, 934, 1291, 1331, 1324, 748, 1549, 1589 ]
            },
            {
                name: '解压游戏',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [827, 932, 2985, 934, 1295, 1337, 1325, 457, 1458, 2547 ]
            },
            {
                name: 'AI咨询',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [824, 932, 1586, 934, 1295, 1332, 1327, 745, 1498, 2104 ]
            },
            {
                name: '冥想练习',
                type: 'line',
                smooth: true,
                showSymbol: false,
                // stack: 'Total',
                data: [824, 932, 3204, 934, 1297, 1332, 1324, 457, 997, 1985]
            }
        ]
    };

    // 图三相关配置
    option3 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
            type: 'value',
            splitNumber: 3,
        },
        color: ['#f896b0'],
        grid: {
            left: '60px',
            top: '20px',
            bottom: '50px'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        series: [
            {
                data: [145, 214, 414, 991, 847, 258, 102, 1115, 945, 127, 784, 214],
                type: 'line',
                smooth: true,
                areaStyle: {},
                showSymbol: false
            }
        ]
    };

    // 图四相关配置
    option4 = {
        tooltip: {
            trigger: 'item'
        },
        color: ['#f35b08', '#f28703', '#f6b801', '#7578ed'],
        series: [
            {
                name: '健康状况',
                type: 'pie',
                radius: ['50%', '70%'],
                // 开启自动避让
                avoidLabelOverlap: true,
                center: ['50%', '50%'],
                itemStyle: {
                    borderRadius: 2,
                    borderColor: '#fff',
                    borderWidth: 1,
                },
                label: {
                    show: true,
                    position: 'outside',           // 标签在外部
                    formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
                    // formatter: '{b}: {d}%',     // 也可以写在同一行
                    color: '#333',
                    fontSize: 10
                },
                labelLine: {
                    show: true,                    // 显示引导线
                    // length: 10,                    // 第一段长度
                    // length2: 15,
                    smooth: true                  // 可选：true 表示曲线
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 114, name: '危机' },
                    { value: 98, name: '预警' },
                    { value: 517, name: '一般' },
                    { value: 2125, name: '健康' }
                ]
            }
        ]
    };

    // 图五相关配置
    option5 = {
        tooltip: {
            trigger: 'item'
        },
        label: {
            show: true, // 改为 true，否则看不到标签
            position: 'center', // 可选：'inside', 'outside', 'center'
            formatter: '{d}%', // 使用 {d}% 显示百分比
            color: 'rgba(0, 0, 0, 0.6)', // 可选：设置字体颜色
            fontSize: 12
        },
        series: [
            {
                name: '来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                center: ['50%', '50%'],
                label: {
                    show: true,
                    position: 'outside',           // 标签在外部
                    formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
                    // formatter: '{b}: {d}%',     // 也可以写在同一行
                    color: '#333',
                    fontSize: 10
                },
                labelLine: {
                    show: true,                    // 显示引导线
                    smooth: true                  // 可选：true 表示曲线
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                itemStyle: {
                    borderRadius: 2,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: [
                    { value: 12, name: '适应' },
                    { value: 45, name: '人际关系' },
                    { value: 78, name: '学校压力' },
                    { value: 12, name: '抑郁' },
                    { value: 207, name: '焦虑' }
                ]
            }
        ]
    };

    // 设置图形配置
    option1 && myChart1.setOption(option1);
    option2 && myChart2.setOption(option2);
    option3 && myChart3.setOption(option3);
    option4 && myChart4.setOption(option4);
    option5 && myChart5.setOption(option5);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart1?.resize();
        myChart2?.resize();
        myChart3?.resize();
        myChart4?.resize();
        myChart5?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart1?.dispose();
        myChart2?.dispose();
        myChart3?.dispose();
        myChart4?.dispose();
        myChart5?.dispose();
    });
})
</script>

<template>
<el-row :gutter="16">
    <el-col :span="18">
        <!-- 四个总体人数统计容器 -->
        <el-row :gutter="16">
            <el-col :span="6">
              <div class="num-box1">
                <div class="num-box-title">累计测评人数</div>
                <div class="num-box-number">11321&nbsp;<span style="font-size: 18px;">人</span></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="num-box2">
                <div class="num-box-title">累计干预人数</div>
                <div class="num-box-number">527&nbsp;<span style="font-size: 18px;">人</span></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="num-box3">
                <div class="num-box-title">累计预警人数</div>
                <div class="num-box-number">419&nbsp;<span style="font-size: 18px;">人</span></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="num-box4">
                <div class="num-box-title">累计建档人数</div>
                <div class="num-box-number">34158&nbsp;<span style="font-size: 18px;">人</span></div>
              </div>
            </el-col>
        </el-row>
        <!-- 中间两个数据图容器 -->
        <el-row :gutter="16" style="margin-top: 16px">
            <el-col :span="12">
                <div class="top-graph-box" @click="router.push('/graph1')">
                    <!-- 第一个图标题部分 -->
                    <div class="graph-title-box">
                      <img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">
                      评测任务进度
                      <div id="chart1-show-more" @click.stop="chart1ShowMore" v-show="!chart1IsShowMore">查看更多<el-icon><ArrowRightBold /></el-icon></div>
                      <div id="chart1-show-more" @click.stop="chart1NotShowMore" v-show="chart1IsShowMore">收起<el-icon><ArrowRightBold /></el-icon></div>
                    </div>
                    <!-- 第一个图图例部分 -->
                    <div id="graph1"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="top-graph-box" @click="router.push('/graph2')">
                    <!-- 第二个图标题部分 -->
                    <div class="graph-title-box"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">用户端功能使用情况</div>
                    <!-- y轴说明 -->
                    <div class="y-commend">单位：人数</div>
                    <!-- 第二个图图例部分 -->
                    <div id="graph2"></div>
                </div>
            </el-col>
        </el-row>
    </el-col>
    <!-- 快捷功能容器 -->
    <el-col :span="6">
        <div class="quick-box">
            <div class="quick-title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">快捷功能</div>
            <!-- 容器用于放六个快捷功能 -->
            <div style="" class="six-quick-box">
                <!-- 第一个快捷功能 -->
                <div class="quick-item-box" @click="router.push('/addeva')">
                    <div class="quick-item-icon-common quick-item-icon1"></div>
                    <div style="text-align: center;margin-top: 5px;">新建测评</div>
                </div>
                <!-- 第二个快捷功能 -->
                <div class="quick-item-box" @click="router.push('/person/center')">
                    <div class="quick-item-icon-common quick-item-icon2"></div>
                    <div style="text-align: center;margin-top: 5px;">账号管理</div>
                </div>
                <!-- 第三个快捷功能 -->
                <div class="quick-item-box" @click="router.push('/userinfo')">
                    <div class="quick-item-icon-common quick-item-icon3"></div>
                    <div style="text-align: center;margin-top: 5px;">档案管理</div>
                </div>
                <!-- 第四个快捷功能 -->
                <div class="quick-item-box" @click="router.push('/groupprogress')">
                    <div class="quick-item-icon-common quick-item-icon4"></div>
                    <div style="text-align: center;margin-top: 5px;">团测进度</div>
                </div>
                <!-- 第五个快捷功能 -->
                <div class="quick-item-box" @click="router.push('/warningover')">
                    <div class="quick-item-icon-common quick-item-icon5"></div>
                    <div style="text-align: center;margin-top: 5px;">预警概览</div>
                </div>
            </div>
        </div>
    </el-col>
</el-row>

<!-- 底部两个数据图容器 -->
<div class="bottom">
  <div class="bottom-graph-box1" @click="router.push('/graph3')">
      <!-- 第三个图标题部分 -->
      <div class="graph-title-box"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">用户访问</div>
      <!-- y轴说明 -->
      <div class="y-commend">单位：人数</div>
      <!-- 第三个图图示部分部分 -->
      <div id="graph3"></div>
  </div>
  <div class="bottom-graph-box2" @click="router.push('/graph4')">
      <!-- 第四和五个图标题部分 -->
      <div class="graph-title-box"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">学校心理健康情况</div>
      <div style="display: flex;position: relative">
        <!-- 第四个图容器 -->
        <div class="last-two-graph-box" id="graph4"></div>
        <div class="last-two-graph-box" id="graph5"></div>
        <div 
          class="ai-box" 
          @click.stop="handleAiClick"
          @mousedown.prevent="handleMouseDown"
          :style="{ transform: `translate(${aiPosition.x}px, ${aiPosition.y}px)` }"
        ></div>
      </div>
  </div>
</div>
</template>

<style scoped>
#chart1-show-more {
  position: absolute;
  color: rgba(0, 0, 0, 0.3);
  right: 10px;
  font-size: 12px;
  cursor: pointer
}
#chart1-show-more:hover {
  color: #4fa1fb;
}
.el-col {
    border-radius: 4px;
}
.quick-box {
  border-radius: 4px;
  min-height: 370px;
  background-color: white;
}
.quick-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: 10px 10px;
  color: rgba(0, 0, 0, .8);
  font-size: 16px;
}
.six-quick-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 40px;
  height: 326.8px;
  justify-content: space-between;
  overflow: hidden;
}
.quick-item-box {
  width: 120px;
  height: 100px;
  cursor: pointer;
}
.quick-item-icon-common {
  height: 60px;
  width: 60px;
  margin-left: 30px;
}
.quick-item-icon1,
.quick-item-icon2,
.quick-item-icon3,
.quick-item-icon4,
.quick-item-icon5 {
  transition: all 0.2s ease;
  background-position: center center;
  background-size: 90% 90%;
  background-repeat: no-repeat;
}
.quick-item-icon1 {
  background-image: url('@/assets/images/home/新建测评.png');
}
.quick-item-icon2 {
  background-image: url('@/assets/images/home/账号管理.png');
}
.quick-item-icon3 {
  background-image: url('@/assets/images/home/档案管理.png');
}
.quick-item-icon4 {
  background-image: url('@/assets/images/home/团测进度.png');
}
.quick-item-icon5 {
  background-image: url('@/assets/images/home/预警概览.png');
}
.quick-item-icon6 {
  background-image: url('@/assets/images/home/添加干预记录.png');
}
.quick-item-icon1:hover,
.quick-item-icon2:hover,
.quick-item-icon3:hover,
.quick-item-icon4:hover,
.quick-item-icon5:hover,
.quick-item-icon6:hover {
  background-size: 100% 100%;
}
.num-box1,.num-box2,.num-box3,.num-box4 {
  min-height: 100px;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
.num-box1:hover,
.num-box2:hover,
.num-box3:hover,
.num-box4:hover {
  background-size: 105% 110%;
}
.num-box-title {
  padding: 10px 5px 10px 20px
}
.num-box-number {
    padding: 0 20px;
    font-size: 28px;
}
.num-box1,
.num-box2,
.num-box3,
.num-box4 {
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.num-box1 {
  background-image: url('@/assets/images/home/首页方框1.png');
}
.num-box2 {
  background-image: url('@/assets/images/home/首页方框2.png');
}
.num-box3 {
  background-image: url('@/assets/images/home/首页方框3.png');
}
.num-box4 {
  background-image: url('@/assets/images/home/首页方框4.png');
}
.top-graph-box {
    background-color: white;
    min-height: 254px;
    border-radius: 6px;
    transition: box-shadow 0.5s ease;
}
.top-graph-box:hover {
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
}
.graph-title-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, .6);
}
#graph2 {
    min-height: 194px;
}
#graph3 {
    min-height: 194px;
}
#graph1 {
    min-height: 200px;
}
.bottom {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.bottom-graph-box1, .bottom-graph-box2 {
    display: inline-block;
    height: 250px;
    background-color: white;
    border-radius: 6px;
    transition: box-shadow 0.5s ease;
}
.bottom-graph-box1 {
    width: 534.925px;
}
.bottom-graph-box2 {
    flex: 1; /* 第二个占剩余空间 */
}
.bottom-graph-box1:hover {
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
}
.bottom-graph-box2:hover {
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
}
/* y轴说明 */
.y-commend {
    padding: 0 20px;
    font-size: 12px;
    color: rgba(0, 0, 0, .4);
}
.last-two-graph-box {
    width: 45%;
    min-height: 206.8px;
}
.ai-box {
  width: 160px;
  height: 150px;
  position: absolute;
  right: -30px;
  top: -60px;
  background: url('@/assets/images/home/AI.png') center center / contain no-repeat;
  cursor: move;
  user-select: none;
  z-index: 1000;
  transition: none;
  will-change: transform;
}
</style>